Page({
  data: {
    // 原始联系人数据
    contacts: [
      { id: 1, name: "张三", avatar: "https://picsum.photos/id/1/200" },
      { id: 2, name: "李四", avatar: "https://picsum.photos/id/2/200" },
      { id: 3, name: "王五", avatar: "https://picsum.photos/id/3/200" },
      { id: 4, name: "赵六", avatar: "https://picsum.photos/id/4/200" },
      { id: 5, name: "钱七", avatar: "https://picsum.photos/id/5/200" },
      { id: 6, name: "孙八", avatar: "https://picsum.photos/id/6/200" },
      { id: 7, name: "周九", avatar: "https://picsum.photos/id/7/200" },
      { id: 8, name: "吴十", avatar: "https://picsum.photos/id/8/200" },
      { id: 9, name: "郑一", avatar: "https://picsum.photos/id/9/200" },
      { id: 10, name: "王二", avatar: "https://picsum.photos/id/10/200" },
      { id: 11, name: "陈晨", avatar: "https://picsum.photos/id/11/200" },
      { id: 12, name: "林琳", avatar: "https://picsum.photos/id/12/200" },
      { id: 13, name: "黄华", avatar: "https://picsum.photos/id/13/200" },
      { id: 14, name: "刘柳", avatar: "https://picsum.photos/id/14/200" },
      { id: 15, name: "杨阳", avatar: "https://picsum.photos/id/15/200" },
      { id: 16, name: "赵照", avatar: "https://picsum.photos/id/16/200" },
      { id: 17, name: "徐旭", avatar: "https://picsum.photos/id/17/200" },
      { id: 18, name: "孙逊", avatar: "https://picsum.photos/id/18/200" },
      { id: 19, name: "马丽", avatar: "https://picsum.photos/id/19/200" },
      { id: 20, name: "朱珠", avatar: "https://picsum.photos/id/20/200" },
      { id: 21, name: "胡虎", avatar: "https://picsum.photos/id/21/200" },
      { id: 22, name: "郭国", avatar: "https://picsum.photos/id/22/200" },
      { id: 23, name: "何和", avatar: "https://picsum.photos/id/23/200" },
      { id: 24, name: "高晓松", avatar: "https://picsum.photos/id/24/200" },
      { id: 25, name: "周杰伦", avatar: "https://picsum.photos/id/25/200" },
      { id: 26, name: "林俊杰", avatar: "https://picsum.photos/id/26/200" },
      { id: 27, name: "Angelababy", avatar: "https://picsum.photos/id/27/200" },
      { id: 28, name: "黄渤", avatar: "https://picsum.photos/id/28/200" },
      { id: 29, name: "吴京", avatar: "https://picsum.photos/id/29/200" },
      { id: 30, name: "沈腾", avatar: "https://picsum.photos/id/30/200" },
    ],
    // 排序后的联系人（按字母分组）
    sortedContacts: [],
    // 字母列表
    letters: [],
    // 当前选中的字母
    currentLetter: '',
    // 滚动位置
    scrollTop: 0,
    // 是否显示字母提示
    showLetterToast: false
  },

  onLoad() {
    // 初始化联系人数据
    this.initContacts();
  },

  // 初始化联系人数据（排序和分组）
  initContacts() {
    const contacts = this.data.contacts;
    
    // 对联系人进行排序
    const sortedContacts = contacts.sort((a, b) => {
      return this.getFirstLetter(a.name).localeCompare(this.getFirstLetter(b.name));
    });
    
    // 按首字母分组
    const groupedContacts = {};
    sortedContacts.forEach(contact => {
      const letter = this.getFirstLetter(contact.name);
      if (!groupedContacts[letter]) {
        groupedContacts[letter] = [];
      }
      groupedContacts[letter].push(contact);
    });
    
    // 转换为数组格式并提取字母列表
    const result = [];
    const letters = [];
    for (const letter in groupedContacts) {
      result.push({
        letter: letter,
        contacts: groupedContacts[letter]
      });
      letters.push(letter);
    }
    
    // 更新数据
    this.setData({
      sortedContacts: result,
      letters: letters
    });
  },

  // 获取姓名的首字母（简化版，实际项目中可能需要更完善的拼音库）
  getFirstLetter(name) {
    // 这里使用一个简单的方法获取首字母
    // 实际项目中建议使用专门的拼音转换库
    const firstChar = name.charAt(0).toUpperCase();
    
    // 检查是否是字母
    if (/[A-Z]/.test(firstChar)) {
      return firstChar;
    }
    
    // 简单判断一些常见姓氏的首字母
    const pinyinMap = {
      '张': 'Z', '李': 'L', '王': 'W', '赵': 'Z', '钱': 'Q',
      '孙': 'S', '周': 'Z', '吴': 'W', '郑': 'Z', '王': 'W',
      '陈': 'C', '林': 'L', '黄': 'H', '刘': 'L', '杨': 'Y',
      '徐': 'X', '马': 'M', '朱': 'Z', '胡': 'H', '郭': 'G',
      '何': 'H', '高': 'G'
    };
    
    return pinyinMap[firstChar] || '#';
  },

  // 触摸字母索引开始
  onLetterTouchStart(e) {
    const letter = e.target.dataset.letter;
    if (letter) {
      this.scrollToLetter(letter);
    }
  },

  // 触摸字母索引移动
  onLetterTouchMove(e) {
    const letter = e.target.dataset.letter;
    if (letter) {
      this.scrollToLetter(letter);
    }
  },

  // 触摸字母索引结束
  onLetterTouchEnd() {
    this.setData({
      showLetterToast: false
    });
  },

  // 滚动到指定字母分组
  scrollToLetter(letter) {
    // 显示字母提示
    this.setData({
      currentLetter: letter,
      showLetterToast: true
    });
    
    // 滚动到对应位置
    const query = wx.createSelectorQuery();
    query.select(`#${letter}`).boundingClientRect();
    query.select('.contacts-scroll').boundingClientRect();
    query.exec((res) => {
      if (res[0] && res[1]) {
        this.setData({
          scrollTop: res[0].top - res[1].top + this.data.scrollTop
        });
      }
    });
  },

  // 监听滚动事件
  onScroll(e) {
    this.setData({
      scrollTop: e.detail.scrollTop
    });
  }
});